<template>
  <m-page>
    <m-header>
      <div class="g-content">
        <!-- 本期应还 -->
        <div class="g-tip-nowpay">
          <span>本期应还</span>
        </div>
        <!-- 额度情况 -->
        <div class="g-limit">
          <div class="g-limit-icon">
            <li>
              <ynet-icon name="success-color" size="lg" svg></ynet-icon>
            </li>
          </div>
          <div class="g-limit-money">
            <p>
              本期剩余应还（元）<br />
              <br />
              <b>23,000.00</b><br />
              本期账单：<span>39,000.00</span>元
            </p>
          </div>
          <div class="g-limit-date">
            <span>截至还款日02-26</span>
            <ynet-tag
              size="large"
              shape="fillet"
              type="fill"
              fill-color="rgba(255, 91, 96, .1)"
              font-weight="normal"
              font-color="#FF5B60"
            >
              已逾期4天
            </ynet-tag>
          </div>
        </div>
        <!-- 提前还款 -->
        <div class="g-tip-repay">
          <div>提前还款</div>
          <!-- 提前还款列表 -->
          <div class="g-list">
            <ul>
              <li>
                <div>
                  <input type="radio" name="repay" />
                </div>
                <div>
                  <p>
                    <b>申请用款 <span>5万元</span></b
                    ><br />
                    剩余应还4500.00元，含本期手续费 50.00元<br />
                    到期日10月21
                  </p>
                </div>
              </li>
              <li>
                <div>
                  <input type="radio" name="repay" />
                </div>
                <div>
                  <p>
                    <b>申请用款 <span>5万元</span></b
                    ><br />
                    剩余应还4500.00元，含本期手续费 50.00元<br />
                    到期日10月21
                  </p>
                </div>
              </li>
              <li>
                <div>
                  <input type="radio" name="repay" />
                </div>
                <div>
                  <p>
                    <b>申请用款 <span>5万元</span></b
                    ><br />
                    剩余应还4500.00元，含本期手续费 50.00元<br />
                    到期日10月21
                  </p>
                </div>
              </li>
            </ul>
          </div>
          <div class="g-list-tip">
            <span>温馨提示：归还本金时应先归还"本期应还"</span>
          </div>
        </div>
        <!-- 按钮 -->
        <div class="g-button">
          <ynet-button type="warning">立即还款</ynet-button>
        </div>
      </div>
    </m-header>
  </m-page>
</template>

<script>
import { Icon, Button, Tag } from "ynet-mobile";
export default {
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Tag.name]: Tag
  },
  data() {
    return {};
  },
  methods: {},
  created() {},
  mounted() {},
  watch: {},
  computed: {}
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
